<!-- 
    Security Knowledge Framework is an expert system application 
    that uses OWASP Application Security Verification Standard, code examples,
    helps developers in pre-development and post-development.  
    Copyright (C) 2020  Glenn ten Cate, Riccardo ten Cate

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
<!--main content start-->

<section id="main-content" class="page03 project-list">
  <section class="intro">
    <div class="inner">
      <div class="text">
        <h1>Checklist edit options</h1>
        <p>Add and update your requirements!</p>
      </div>
      <button style="float:right; margin-left:4px;" (click)="back()" class="btn btn-green"><i class="fa fa-arrow-left"
          aria-hidden="true"></i> Back</button>
      <!--<button style="float:right;" (click)="newChecklistItemModal(modalValue)" class="btn btn-default"><i class="fa fa-cog"
          aria-hidden="true"></i>
        Add new checklist item</button>-->
    </div>
  </section>
  <section class="wrapper" style="margin-top:0px;">
    <div class="row mt">
      <div class="col-lg-12">
          
          <div *ngIf="isSubmitted && formControls.checklist_id.errors" class="help-block">
              <div *ngIf="formControls.checklist_id.errors.required">
                <ngb-alert type="danger" [dismissible]="false">
                  Checklist id was not filled in 
                </ngb-alert>
              </div>
              <div *ngIf="formControls.checklist_id.errors.pattern">
                  <ngb-alert type="danger" [dismissible]="false">
                    Checklist id was not confirm standard 'number.number' (1.1, 2.1, 3.0, etv)
                  </ngb-alert>
                </div>
            </div>
    
            <div *ngIf="isSubmitted && formControls.content.errors" class="help-block">
              <div *ngIf="formControls.content.errors.required">
                <ngb-alert type="danger" [dismissible]="false">
                  Content was not filled in
                </ngb-alert>
              </div>
            </div>
    
            <div *ngIf="isSubmitted && formControls.kb_id.errors" class="help-block">
              <div *ngIf="formControls.kb_id.errors.required">
                <ngb-alert type="danger" [dismissible]="false">
                  Knowledgebase id description was not selected
                </ngb-alert>
              </div>
            </div>
    
            <div *ngIf="isSubmitted && formControls.question_id.errors" class="help-block">
              <div *ngIf="formControls.question_id.required">
                <ngb-alert type="danger" [dismissible]="false">
                  Question  was not selected
                </ngb-alert>
              </div>
            </div>
    
            <div *ngIf="isSubmitted && formControls.cwe.errors" class="help-block">
              <div *ngIf="formControls.cwe.errors.required">
                <ngb-alert type="danger" [dismissible]="false">
                  CWE id  was not filled in
                </ngb-alert>
              </div>
              <div *ngIf="formControls.cwe.errors.pattern">
                  <ngb-alert type="danger" [dismissible]="false">
                    CWE needs to be a numeric value
                  </ngb-alert>
                </div>
            </div>

            <div *ngIf="isSubmitted && formControls.maturity.errors" class="help-block">
              <div *ngIf="formControls.maturity.errors.required">
                <ngb-alert type="danger" [dismissible]="false">
                  maturity was not filled in
                </ngb-alert>
              </div>
              <div *ngIf="formControls.maturity.errors.pattern">
                  <ngb-alert type="danger" [dismissible]="false">
                    maturity needs to be a numeric value
                  </ngb-alert>
                </div>
            </div>
    
          <!-- Here starts when people select they want to edit the checklist-->
          <section class="panel">
            <header class="panel-heading">
              <h4 style="background-color:#515594; color:white; padding-bottom:1%; padding-top:1%" class="panel-title">&nbsp; Update checklist item</h4>
            </header>
            <div class="panel-body">
              <form [formGroup]="checklistForm">
                <div class="form-group">
                  <div class="wrap">
                    <br />
                    <label for="inputVersion" class="col-sm-2 control-label">Checklist ID *</label>
                    <div class="col-sm-10">
                      <input maxlength="120" formControlName="checklist_id" type="text" class="form-control" id="inputVersion">
                      <div class="wrap desc alert-info">
                        <div class="col-sm-10">e.g. 1.0, 1.1 etc</div>
                      </div>
                    </div>
                    <label for="inputVersion" class="col-sm-2 control-label">Checklist title *</label>
                    <div class="col-sm-10">
                      <input required formControlName="content" type="text" class="form-control">
                      <div class="wrap desc alert-info">
                        <div class="col-sm-10">What is the title of the checklist item?</div>
                      </div>
                    </div>
                    <label for="inputVersion" class="col-sm-2 control-label">KB item *</label>
                    <div class="col-sm-10">
                      <ng-select [items]="knowledgebaseItems" bindLabel="title" placeholder="Select Item" formControlName="kb_id">
                      </ng-select>
                      <div class="wrap desc alert-info">
                        <div class="col-sm-10">Select the correlating knowledgebase item!</div>
                      </div>
                    </div>
                    <label for="inputVersion" class="col-sm-2 control-label">Sprint Questionnaire</label>
                    <div class="col-sm-10">
                      <ng-select [items]="questions" bindLabel="question" placeholder="Selectquestion" formControlName="question_id">
                      </ng-select>
                      <div class="wrap desc alert-info">
                        <div class="col-sm-10">Correlate the checklist item with a sprint questionnaire</div>
                      </div>
                    </div>
                    <label for="inputVersion" class="col-sm-2 control-label">Include always *</label>
                    <div class="col-sm-10">
                      <select class="form-control" name="include_always" formControlName="include_always" id="sel1">
                        <option value="True">true</option>
                        <option value="False">false</option>
                      </select>
                      <div class="wrap desc alert-info">
                        <div class="col-sm-10">select to use this checklist in all the sprints</div>
                      </div>
                    </div>
                    <label for="cwe" class="col-sm-2 control-label">Maturity</label>
                    <div class="col-sm-10">
                      <input required maxlength="120" type="text" class="form-control" formControlName="maturity">
                      <div class="wrap desc alert-info">
                        <div class="col-sm-10">1,2,3</div>
                      </div>
                    </div>
                    <label for="cwe" class="col-sm-2 control-label">CWE</label>
                    <div class="col-sm-10">
                      <input required maxlength="120" type="text" class="form-control" formControlName="cwe">
                      <div class="wrap desc alert-info">
                        <div class="col-sm-10">e.g. 713</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="margin-top:2%;padding-bottom:1.5%;padding-left:1.5%;">
                  <button style="margin-top:2%" type="button" class="btn btn-danger" (click)="deleteChecklistItemModal(deleteChecklist);" id="show-delete-modal">Delete</button>
                  <button style="margin-right:1.5px; margin-left:1.5px; margin-top:2%" type="button" class="btn btn-warning"
                    (click)="updateChecklistItem();" id="update-checklist-control">Update</button>
                </div>
              </form>
            </div>
          </section>
          <!-- Here ends when people select they want to edit the checklist-->

          <!--Modal for deleting checklist items-->
          <ng-template #deleteChecklist let-c="close" let-d="dismiss">
            <div class="modal-header">
              <h4 class="modal-title">Delete checklist item!</h4>
              <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Are you sure you want to delete this checklist item?</p>
              <p>To confirm, type <b style='color:red'> DELETE </b> and click the delete button</p>
              <input type="text" [(ngModel)]="delete" name="delete" class="form-control">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
              <button type="button" class="btn btn-danger" (click)="deleteChecklistItem()"
                (click)="c('Close click')" id="delete-checklist-item-finalized">Delete</button>
            </div>
          </ng-template>
          <!--END Modal for deleting checklist items-->
      </div>
      <!-- /col-lg-4 -->
    </div>
    <!-- /row -->
  </section>
  <!--/wrapper -->
</section>
<!-- /MAIN CONTENT -->